@extends('layouts.main')

@section('style')
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        .goods-attr > span {
            line-height: 30px;
            font-size: 18px;
        }

        .fl {
            float: left;
        }

        .fr {
            float: right;
        }
    </style>
@endsection
@section('content')
    <div class="container" style="padding: 0;">
        <div class=" text-center span5" style="margin: 0;">
            <img src="{{$goods->pic ?? ''}}" border="0" class="img-rounded" width="500px" height="690px">
        </div>
        <div class="  well well-large text-left span6">
            <div class="mc"><h2>{{$goods->name ?? ''}}</h2></div>
            <br>
            <div style="color:#f69">￥{{$goods->price ?? ''}}</div>
            <br>
            <div class="alert alert-info alert-block">{{$goods->details ?? ''}}</div>
            <br><br>
            <form action="" id="app">
                {{csrf_field()}}
                <table class="table table-striped span5 text-center table-bordered table-hover table-condensed">
                    <thead>
                    <tr>
                        <th class="info">颜色</th>
                        <th class="info">尺码</th>
                        <th class="info">选择数量</th>
                    </tr>
                    </thead>
                    <tbody>

                    <tr v-for="item in matches">
                        <td> @{{ item.color }}</td>
                        <td> @{{ item.size }}</td>
                        <td>
                            <el-input-number v-model="item.buy_num" size="mini" :step="1" :min="0"
                                             :max="item.num"></el-input-number>
                            库存@{{item.num}}
                        </td>
                    </tr>
                    </tbody>

                </table>

                <br>
                <div style="margin-top:40px;margin-bottom:40px;">
                    <button class="btn btn-info btn-inverse btn-large btn-block gwc add_cart span5 fl" type="button"
                            @click="handleBuy">
                        加入购物篮
                    </button>

                </div>
            </form>
        </div>
        <div class=""></div>

    </div>
    <div id="comment-app" style="margin-top: 25px;">
        <h3>评论</h3>
        <p v-if="comments.length==0">暂无评论</p>
        <div v-for="item in comments" style="font-size: 18px ;margin-top:20px;padding:10px;background-color: #f2f2f2">
            <p>@{{ item.user.name}}：@{{item.details}}</p>
            <span style="font-size: 16px;">时间：@{{ item.time }}</span>
        </div>
        <br>
        <el-pagination v-if="comments.length > 0" background layout="prev, pager, next" :total="total"
                       @current-change="handlePageChange" :page-size="15"></el-pagination>
    </div>
@endsection

@section('scripts')
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>

        axios.interceptors.request.use((config) => {
            config.headers['X-Requested-With'] = 'XMLHttpRequest';
            config.headers['X-CSRFToken'] = document.getElementsByTagName('meta')['csrf-token'];
            return config
        });
        /*        $('.add_cart').click(function () {
                    let num = 0;
                    $('.goods_num').each(function () {
                        console.log($(this).val());
                        if ($(this).val() > 0) {
                            num = 1;
                        }
                    });
                    if (num == 0) {
                        return alert('请选择尺码和数量！');
                    }
                    $.post('{{route('cart.store')}}', $('form').serializeArray(), function (res) {
                if (res.status == '40001') {
                    alert('请登陆');
                }
                if (res.status == '0') {
                    alert('加入成功');
                    location.href = '{{route('cart.index')}}';
                }
            })
        });*/

        new Vue({
            el: '#comment-app',
            data: function () {
                return {
                    comments: [],
                    filter: {
                        page: 1,
                        goods_id: '{{$goods->goods_id}}',
                    },
                    total: 0,
                };
            },
            methods: {
                getLists() {
                    let self = this;
                    axios.post('{{route('comment.list')}}', this.filter).then((res) => {
                        if (res.data.status !== 0) {
                            this.$message(res.data.msg);
                        } else {
                            this.comments = res.data.data.data.data;
                            console.log(this.comments);
                            this.filter.page = res.data.data.data.current_page;
                            this.total = res.data.data.data.total;
                        }
                    })
                },
                handlePageChange(e) {
                    this.filter.page = e;
                    this.getLists();
                },
            },
            mounted() {
                this.getLists();
            }
        });
        new Vue({
            el: '#app',
            data: function () {
                return {
                    matches: [],
                };
            }, methods: {
                handleBuy: function () {
                    let data = {};
                    for (let index in this.matches) {
                        if (this.matches[index].buy_num != undefined && this.matches[index].buy_num > 0) {
                            data[this.matches[index].id] = this.matches[index].buy_num;
                        }
                    }
                    if (Object.keys(data).length === 0) {
                        return alert('请选择尺码和数量！');
                    }
                    axios.post('{{route('cart.store')}}', {goods_match: data}).then(function (res) {
                        if (res.data.status == '40001') {
                            alert('请登陆');
                            return;
                        }
                        if (res.data.status == '0') {
                            alert('加入成功');
                            location.href = '{{route('cart.index')}}';
                        }
                    })
                    console.log(data);
                }
            }, mounted() {
                let self = this;
                axios.get('{{route('goods.match')}}?goods_id={{$goods['goods_id']}}').then(function (res) {
                    if (res.data.status !== 0) {
                        self.$message('s');
                    } else {
                        let matches = res.data.data.match;
                        for (let index in matches) {
                            matches[index]['buy_num'] = 0;
                        }
                        self.matches = matches;
                    }
                })
            }
        });
    </script>
@endsection
